{% extends 'base.html' %}
{% block content %}
    <div class="jumbotron">
        <table>
            <tr valign="top">
                <td><img src="{{ user.avatar(170) }}"></td>
                <td>
                    <h2>User: <strong>{{ user.nickname }}</strong></h2>
                    {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}
                    {% if user.last_seen %}
                        <p><em>Last seen on: {{ momentjs(user.last_seen).calendar() }}</em></p>
                    {% endif %}

                    <p>{{ user.followers.count() }} followers |
                        User id is: {{ user.id }}
                    </p>

                </td>
            </tr>
            <tr>
                <td>
                    {% if user.id == g.user.id %}
                        <a href="{{ url_for('edit') }}">Edit profile</a>
                    {% endif %}
                    {% if  g.user.is_following(user) %}|
                        <a href="{{ url_for('unfollow', nickname = user.nickname) }}">unFollow</a>
                    {% else %}|
                        <a href="{{ url_for('follow', nickname = user.nickname) }}">Follow</a>
                    {% endif %}
                    </p>
                </td>
            </tr>
        </table>

        {% for post in posts.items %}
            {% include 'post.html' %}
        {% endfor %}


        <!--显示分页-->
        <ul class="pager">
            {% if posts.has_prev %}
                <li class="previous"><a
                        href="{{ url_for('user', nickname=user.nickname,page = posts.prev_num) }}">上一页</a>
                </li>
            {% else %}
                <li class="previous disabled"><a href="#">上一页</a></li>
            {% endif %}
            {% if posts.has_next %}
                <li class="next"><a href="{{ url_for('user', nickname=user.nickname,page = posts.next_num) }}">下一页</a>
                </li>
            {% else %}
                <li class="next disabled"><a href="#">下一页</a></li>
            {% endif %}
        </ul>
    </div>
{% endblock %}